<template>
  <el-form
    ref="form"
    v-bind="$attrs"
    :label-width="labelWidth"
    :label-suffix="labelSuffix"
    :inline="inline"
    :validate-on-rule-change="validateOnRuleChange"
    v-on="$listeners"
  >
    <slot
      slot="default"
      name="default"
    />
  </el-form>
</template>

<script>
import Vue from 'vue';
import {Form} from "element-ui";
Vue.use(Form);
/**
 * 表单
 * @author maolin
 */
export default {
  name: "ErpForm",
  props: {
    /**
     * 表单项名称宽度
     * @public
     */
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    /**
     * 表单项后缀
     * @public
     */
    labelSuffix: {
      type: String,
      default: "："
    },
    /**
     * 是否为行内表单
     * @public
     */
    inline: {
      type: Boolean,
      default: false
    },
    /**
     * 是否在规则改变之后立即验证一次
     * @public
     */
    validateOnRuleChange: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    /**
     * 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
     * @public
     */
    resetField () {
      this.$refs.form.resetField();
    },
    /**
     * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
     * @param {function} callback Function(props: array | string)
     * @public
     */
    clearValidate (callback) {
      this.$refs.form.clearValidate(callback);
    },
    /**
     * 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
     * @param {function} callback Function(callback: Function(boolean, object))
     * @public
     */
    validate (callback) {
      this.$refs.form.validate(callback);
    },
    /**
     * 对部分表单字段进行校验的方法
     * @param {function} callback Function(props: array | string, callback: Function(errorMessage: string))
     * @public
     */
    validateField (callback) {
      this.$refs.form.validateField(callback);
    }
  }
};
</script>

<style scoped>

</style>
